import React,{Component} from 'react'

export default class CommentInput extends Component{
    constructor(){
        super();
        this.state = {
            username:'',
            content:''
        }
    }
    handleUsernameChange(e){
        this.setState({
            username:e.target.value
        })
    }
    handleContentChange(e){
        this.setState({
            content:e.target.value
        })
    }
    hanleComment(){
        const {username,content} = this.state
        if(!username){
            alert('请输入用户名')
            return
        }
        if(!content){
            alert('请输入评论内容')
            return
        }
        if(this.props.onChange){
            this.props.onChange({
                username,
                content
            })
        }
        this.setState({
            content:''
        })
    }
    render(){
        return(
            <div>
                <div className="userName">
                    <label htmlFor="">name</label>
                    <input 
                        type="text" 
                        className='form-control'
                        value={this.state.username}
                        onChange={this.handleUsernameChange.bind(this)}/>
                </div>
                <div className="userContent">
                    <label htmlFor="">content</label>
                    <textarea 
                        className='form-control'
                        value={this.state.content}
                        onChange={this.handleContentChange.bind(this)}></textarea>
                </div>
                <button 
                    className='btn btn-default'
                    onClick={this.hanleComment.bind(this)}>submit</button>
            </div>
        )
    }
}